<script setup lang="ts">
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import { ref } from "vue";
import { useRouter } from "vue-router"
import { useI18n } from 'vue-i18n'
const { locale:localeLanguage } = useI18n() 
const router = useRouter()
const locale = ref(zhCn)
const changeLang = (language:any) => {
  locale.value = language
  localeLanguage.value = language.name
}
</script>

<template>

    <el-config-provider :locale="locale">
      <button @click="changeLang(zhCn)">中文</button>
      <button @click="changeLang(en)">英文</button>
      <button @click="()=>router.push({path:'/home'})">首页</button>
      <button @click="()=>router.push({path:'/mine'})">个人中心</button>
      <router-link to="/home">首页</router-link>
      <router-link to="/mine">首页</router-link>
      <el-button>默认</el-button>
      <router-view />
    </el-config-provider>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
